第一個 web API project ，就先從最簡單的天氣 API 做起吧。
在 ProgrammableWeb 裡面，天氣 API 是最受歡迎的類別之一。
如果因為 API 太多，覺得無從選起，可以看看 Summary Tab 裡面
有個最受歡迎 API 的列表：
Weather Channel 跟 Yahoo Weather 好像是受到許多人歡迎的兩個 API ， 我兩個都試了。但在嘗試使用 Weather Channel 的時候，註冊之後一直沒辦法登入取得 API Key ， Yahoo Weather 則是因為 Documentation 讓我有點困惑，所以就放棄而選用了 OpenWeatherMap 。
OpenWeatherMap 有提供各種不同天氣資訊，從當下天氣狀況到每段時間的天氣預測都有。不過，我做這個天氣 App 的目的，主要是練習 Web API 的使用，只要能夠接通 API 就好。所以這個最基本的天氣 APP 只會有一個功能：顯示台北當下的天氣狀況。
想要使用 Open Weather Map 的API 必須申請帳號來取得 API Key 。根據 How to start 頁面的說明，一個 API Call 的連結是這樣的：
API call:
http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID={APIKEY}
在取得 API Key 之後把裡面的 { APIKEY } 換成你申請帳號所得到的 Key ，這個連結就可以拿來使用了。
在上面兩個頁面裡，OpenWeatherMap 都提醒說啟用 API 需要10分鐘左右的時間，但就我使用的經驗來看，似乎更長一點。所以如果得到 API 之後立刻放進自己的 code 裡面而出現錯誤的話，很可能不是自己這邊的問題而是因為 API 還尚未啟用完成。
現在我們得到了 API ，建立一個新的 HTML 檔案，
在 裡面 放上一個 id = “weather” 的 tag` ， 然後在 裡面放上一個基本的 XHR object 的 function 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
</head>
<body>
<div id="weather"></div>
<script>
function makeRequest() {
xhr = new XMLHttpRequest();
xhr.onload= function() {
// 這邊處理傳回來的東西
}
xhr.open('GET','https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=9c39fa3ce9d953fdd507d7d9f77093ef', true )
xhr.send()
}
makeRequest();
</script>
</body>
</html>
為了先搞清楚會拿到什麼樣的 Response ，我在 onload method 裡面把 responseText ，也就是傳回來的值，log 出來：
xhr.onload= function() {
// 這邊處理傳回來的東西
console.log(this.responseText)
}
把此 HTML 檔案在瀏覽器裡面開啟，然後打開 Console 就可以看到以下畫面：
如果可以看到這個畫面而不是 error 的話，就表示 API 有接上了！
但好像有點怪怪的？ 此時如果在 Console 裡面輸入 console.log(typeof(xhr.responseText));
就會發現傳回來的東西是字串，所以為了要 access 裡面 property 的值，要把 string 轉回 object 。
宣告一個叫做 response 的 variable 來放這個 object 。
xhr.onload= function() {
var response = JSON.parse(this.responseText);
console.log(response);
}
這樣一來，我們就可以用 bracket notation 或 dot notaion的方法把我們想要的資訊挖出來。一個天氣 App 至少要顯示所在位置、溫度、天氣狀況吧。在把 response object打開來翻一翻之後，可以看到 city.name 是 “Moscow” 莫斯科，city.country 是”RU” 俄羅斯，等等再改成台北。
list 裡面是一個放了40個 object 的 array ，每個 object 裡面是到不同時間點的天氣狀況，我們拿第一個出來用就好。
天氣狀況跟氣溫都在 list 裡面，氣溫、氣壓、濕度等等的資訊都在 main 這個 property裡面，天氣狀況則是在 weather 裡面。
現在整理一下我們想要的資訊的取得路徑：
只要把上面這些東西放進 HTML 裡面，就可以讓天氣資訊顯示在網頁上面了
xhr.onload= function() {
var response = JSON.parse(this.responseText);
var city = response.city.name + ", " +response.city.country;
var weatherTitle = response.list[0].weather[0].main;
var temp = response.list[0].main.temp + "°";
var weatherContainer = document.querySelector('#weather')
weatherContainer.innerHTML= city + "<br/>"+ weatherTitle + "<br/>"+temp ;
}
不過現在城市所在地還是在莫斯科、溫度單位也是華氏，我們來把他分別改成台北跟攝氏。仔細看 API 的 Documentation ， 可以用兩種方式選擇城市，在api.openweathermap.org/data/2.5/weather後面加上
想改溫度單位就在 api 上面加上
想改語言設定可以加上
以上不同的設定要用&連接起來，所以我們的 API 連結現在長這樣：
https://api.openweathermap.org/data/2.5/forecast?q=Taipei,tw&APPID=9c39fa3ce9d953fdd507d7d9f77093ef&lang=zh_tw&units=metric
不過我發現這個 API 並沒有中文化的很完全，所以還是設定成英文吧….
醜陋的成品：
附上 Codepen Demo
以上是過於詳盡的第一個 API 教學。
iThome鐵人賽
看影片追技術